<template>
	<view class="box-padding" style="--px: 26rpx">
		<view class="box" v-if="detail">
			<view class="box-title flex vertical-center fn-25 fn-w hairline--bottom mt-10">
				<image style="width: 32rpx;" class="mr-15" src="../../../static/course/detail.png" mode="widthFix"></image>
				预约详情
			</view>
			<view class="flex fn-25 ml-30 mt-30">
				<text>所选门店：</text>
				<text class="ml-20">{{detail.s_name}}</text>
			</view>
			<view class="flex fn-25 ml-30 mt-30">
				<text>所选课程：</text>
				<text class="ml-20">{{detail.c_name}}</text>
			</view>
			<view class="flex fn-25 ml-30 mt-30">
				<text>课程老师：</text>
				<text class="ml-20">{{detail.t_name || '---'}}</text>
			</view>
			<view class="flex fn-25 ml-30 mt-30 mb-10">
				<text>上课时间：</text>
				<text class="ml-20">{{detail.date}} </text> <!-- 20:00 --- 22:20-->
			</view>
			<!-- <view class="flex fn-25 ml-30 mt-30 mb-10">
				<text>上课教室：</text>
				<text class="ml-20">第八教室</text>
			</view> -->
		</view>
		
		<view style="padding-top: 30rpx;">
			<v-button @onclick="onCompile">更改信息</v-button>
		</view>
		
		<!-- 背景图片 -->
		<view class="bottom-bg"><image src="../../../static/icon/apply-detail.png" mode=""></image></view>
	</view>
</template>

<script>
	import vButton from "@/components/button/button.vue";
	import HomeApi from "@/api/home.js";
	
	export default {
		components: {
			vButton
		},
		data() {
			return {
				detail: null
			};
		},
		onLoad() {
			this.getDetail();
		},
		methods: {
			async getDetail() {
				const res = await HomeApi.GetApmtDetail()
				this.detail = res;
			},
			onCompile() {
				uni.redirectTo({
					url: `/pages/make-apply/second-step/second-step?id=${this.detail.shop_id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		background-color: $color-white;
		box-shadow: 3rpx 3rpx 10rpx rgba(#eee, 0.1);
		padding: 20rpx;
		border-radius: 5rpx;
		margin-bottom: 30rpx;
	
		&-title {
			padding-bottom: 20rpx;
		}
	}
.bottom-bg {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 1;
	width: 100vw;
	height: 378rpx;
}
</style>
